<template>
  <div class="container">
    <div class="row" id="translateForm">
      <div class="col-md-6 col-md-offset-3">
        <form class="well form-inline" v-on:submit="formSubmit">
          <input class="form-control" type="text" v-model='textToTranslate' name="" placeholder="请输入要翻译的内容">
          <select class="form-control" v-model="language" placeholder="语言">
            <option value="en">English</option>
            <option value="ru">Russian</option>
            <option value="ko">Korean</option>
            <option value="ja">Janpenese</option>
          </select>
          <button class="btn btn-primary">翻译</button>
        </form>
      </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'translateForm',
  data () {
    return {
      textToTranslate:"",
      language:""
    }
  },
  methods:{
    formSubmit:function(e){
      // alert(this.textToTranslate);
      this.$emit("submitForm",this.textToTranslate,this.language);
      e.preventDefault();
    }
  },
  created:function(){
      this.language="en"
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    color:#fff;
    text-align:center;
    line-height:60px;
  }
  #translateForm form{
    border:1px solid #ccc;
    border-radius: 10px;
  }
</style>
